<template>
  <div class="main-nav">
    <div class="header">
      <img class="logo" :src="require('@/assets/img/47dc19b4b032551d69a151d13b03cde.jpg')" />
      <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal">
        <div style="display: inline-block;" v-for="(e, i) in routerList" :key="i" @click="isLogin(e)">
          <el-menu-item :index="resolvePath(e.path)">{{ e.title }}</el-menu-item>
        </div>
      </el-menu>
      <div class="LoginBox">
        <div v-if="$store.getters.getIsLogin" style="
            margin-left: 1-0px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1%;
          ">
          <a class="info" href="#" title="消息" @click="news">
            <i class="el-icon-chat-dot-round"></i>
          </a>
          <img v-lazy="userAvatar" class="headPortrait" loading="lazy" />
          <el-dropdown>
            <span id="userName" style="margin-left: 10px; cursor: pointer">{{ userName }}<i
                class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <div @click="toUserInfoForm">
                <el-dropdown-item icon="el-icon-tickets" class="dropdown">个人中心</el-dropdown-item>
              </div>
              <div @click="logout">
                <el-dropdown-item icon="el-icon-user" class="dropdown">退出登录</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <button class="button" @click="$router.push('/login')" v-else>
          登录<span></span>
        </button>
      </div>
      <!-- <div :class="{ block: true, sticky: !$store.state.isY }">
        <div class="logo" @click="toHome"></div>
        <div class="main">
          <ul>
            <li><a @click="$router.push('/')">首页</a></li>
            <li><a @click="toYwbd">学术交流</a></li>
            <li><a @click="associationNews">智聊室</a></li>
            <li><a @click="$router.push('/eventNews')">赛事咨询</a></li>
            <li><a @click="toXxzl">学习资料</a></li>
            <li><a @click="toSignUp">我要报名</a></li>
            <div class="bar"></div>
          </ul>
        </div>
        <div v-if="$store.getters.getIsLogin" style="
            margin-left: 1-0px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1%;
          ">
          <a style="font-size: 30px; margin-right: 25px; color: #409eff" href="#" title="消息" @click="news">
            <i class="el-icon-chat-dot-round"></i>
          </a>
          <img v-lazy="userAvatar" class="headPortrait" loading="lazy" />
          <el-dropdown>
            <span id="userName" style="margin-left: 10px; cursor: pointer">{{ userName }}<i
                class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <div @click="toUserInfoForm">
                <el-dropdown-item icon="el-icon-tickets" class="dropdown">个人中心</el-dropdown-item>
              </div>
              <div @click="logout">
                <el-dropdown-item icon="el-icon-user" class="dropdown">退出登录</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <button class="button" @click="$router.push('/login')" v-else>
          登录<span></span>
        </button>
      </div>
      <div class="image-container">
        <img v-lazy="navBackgroundimg" alt="" class="homeFullScreenVideo" loading="lazy" />
      </div> -->
    </div>
  </div>
</template>

<script>
import * as commonUtil from "@/utils/commonUtil";
import * as permission from "../../plugins/permission";
import Cookies from "js-cookie";
import { getJoinFormStatusByToken } from "../../api/signUp";
import { isExternal } from '@/utils/validate'
export default {
  name: "mainNav",
  props: {
    // navBackgroundimg: {
    //   type: String,
    //   required: true,
    // },
  },
  data() {
    return {
      userName: "",
      userAvatar: "",
      isYaxis: true,
      routerList: [
        {
          path: "/",
          title: "首页",
          isLogin: false
        },
        {
          path: "/ywbd",
          title: "校园圈",
          isLogin: true
        },
        {
          path: "/SmartChatRoom",
          title: "社团智友",
          isLogin: true
        },
        {
          path: "/eventNews",
          title: "赛讯情报站",
          isLogin: false
        },
        {
          path: "/xxzl",
          title: "学海宝库",
          isLogin: true
        },
        {
          path: "/classroomReservation",
          title: "教室预约",
          isLogin: true
        },
        // {
        //   path: "/queryAdmissionResults",
        //   title: "我要报名",
        //   isLogin: true
        // },
      ]
    };
  },
  computed: {
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  },
  created() {
    // this.slideNavigationBarChanges();
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    handleEvent(isY) {
      this.isYaxis = isY;
    },
    toHome() {
      this.$router.push("/");
    },
    //前往学术交流页面
    toYwbd() {
      if (Cookies.get("token")) {
        this.$router.push("/ywbd");
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往学习资料页面
    toXxzl() {
      if (Cookies.get("token")) {
        this.$router.push("/xxzl");
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往软协动态页面
    associationNews() {
      if (Cookies.get('token')) {
        this.$router.push('/SmartChatRoom')
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往我要报名功能
    toSignUp() {
      if (Cookies.get("token")) {
        // 创建一个Date对象，表示2024年10月1日0点
        let targetDate = new Date(2024, 9, 1, 0, 0, 0); // 注意月份是从0开始的，所以9代表10月

        // 获取当前日期和时间
        let now = new Date();

        // 比较当前时间是否小于目标时间
        if (now < targetDate) {
          this.$router.push("/signUp");
        } else {
          this.$message.warning("报名时间已截止");
        }
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //前往查询录取结果页面
    goQueryAdmissionResults() {
      if (Cookies.get("token")) {
        //获取是否能查询录取结果
        getJoinFormStatusByToken().then((res) => {
          if (res.code == 20001) {
            this.$message.error(res.message);
            return;
          } else {
            this.$router.push("/queryAdmissionResults");
          }
        });
      } else {
        this.$message.warning("您还未登录，请前往登录");
        this.$router.push("/");
      }
    },
    //滑动页面，导航条变化
    slideNavigationBarChanges() {
      window.addEventListener("scroll", () => {
        let block = document.querySelector(".block");
        block.classList.toggle("sticky", window.scrollY > 0);
      });
    },

    //获取用户个人信息
    getUserInfo() {
      this.$store.dispatch("queryUser").then(() => {
        this.userAvatar = this.$store.state.userInfo.avatar;
        this.userName = this.$store.state.userInfo.nickname;
      })
    },
    //消息模块
    news() {
      this.$message.warning("暂未开放，敬请期待");
    },
    //个人中心
    toUserInfoForm() {
      this.$router.push("/userInfoForm");
    },
    //退出登录
    logout() {
      commonUtil.removeStore("token");
      permission.init();
      //跳转页面
      this.$store.dispatch("logout");
      this.$router.push("/");
      this.$message.success("退出成功");
    },

    // 處理路由地址
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      return routePath
    },
    isLogin(e) {
      if (e.path == '/queryAdmissionResults') {
        this.goQueryAdmissionResults()
        return
      }
      if (e.isLogin && !Cookies.get('token')) {
        this.$message.warning("您还未登录，请前往登录");
        return
      }
      this.$router.push(e.path);
    },
  },
};
</script>

<style scoped>
.image-container {
  height: 100vh;
  /* 高度设置为视口高度的100% */
  width: 100%;
  /* 宽度设置为100% */
  overflow: hidden;
  /* 隐藏溢出容器的内容 */
  position: relative;
  /* 相对定位 */
}

.homeFullScreenVideo {
  width: 100%;
  /* 图片宽度设置为100% */
  height: 100vh;
  /* 图片高度设置为视口高度的100% */
  object-fit: cover;
  /* 保持图片宽高比，覆盖整个容器 */
}

.header {
  text-align: center;
  position: relative;
}

.LoginBox {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  .header {
    text-align: left;
    padding-left: 60px;
  }
}

/* 导航栏 */
.header .block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 40px 20px;
  z-index: 1000;
  transition: 0.6s;
  justify-content: space-around;
}

/* 图片 */
.header .block .logo {
  background-image: url("@/assets/img/logo2.png");
  background-size: cover;
  width: 230px;
  height: 75px;
  transition: 0.6s;
}

.header .block .main {
  /* margin: 0 0 0 200px; */
  left: 230px;
  right: 130px;
  font-size: 18px;
  text-align: center;
}

.header .block .main ul {
  display: flex;
  justify-items: center;
  align-items: center;
}

.header .block .main ul li {
  margin-right: 20px;
  list-style: none;
  cursor: pointer;
}

.header .block .main ul li a {
  margin: 0 30px;
  text-decoration: none;
  color: white;
  transition: 0.6s;
}

/* 滑动页面改变导航栏样式 */
.block.sticky {
  padding: 6px 10px;
  background-color: #fff;
  background-image: linear-gradient(to bottom, #fff, #fff);
}

.block.sticky .logo {
  background-image: url("@/assets/img/软协logo（蓝）.png");
}

.block.sticky .main ul li a {
  color: black;
}

.sticky .main ul li {
  width: 132px;
  position: relative;
  margin-right: 20px;
  list-style: none;
  cursor: pointer;
}

/* 下划线跟随鼠标移动 */
.block .main ul li {
  position: relative;
  margin-right: 20px;
  list-style: none;
  cursor: pointer;
}

.block .main ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;

  width: 0%;
  height: 100%;
  border-bottom: 2px solid #5698c3;
  transition: 0.2s all linear;
}

.block {
  padding: 6px 70px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.block .main ul li:hover::before {
  width: 100%;
  top: 0;
  left: 0;
  transition-delay: 0.1s;
  z-index: -1;
}

.block .main ul li:hover~li::before {
  left: 0;
}

/* 鼠标移动改变字体颜色 */
.block .main ul li a:hover {
  /* background-color: rgba(255, 255, 255, 0.25); */
  color: #5698c3;
}

.headPortrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background: #c0c4cc;
}

.info {
  font-size: 30px;
  margin-right: 25px;
  color: #409eff;
}

.dropdown {
  padding: 5px 10px;
}

.button {
  border: 3px solid royalblue;
  display: block;
  position: relative;
  padding: 0.1em 1.2em;
  font-size: 1em;
  background: transparent;
  cursor: pointer;
  user-select: none;
  color: royalblue;
  overflow: hidden;
  z-index: 100;
}

.button span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
}

.button span::before {
  content: "";
  position: absolute;
  width: 8%;
  height: 500%;
  /* background: #f5f5f5; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 1s;
}

.button:hover span::before,
.button:focus span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  background: royalblue;
}

.button:hover,
.button:focus {
  color: #fff;
}

.logo {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  .header {
    padding-left: 8.57vw;
  }

  .el-menu-item {
    font-size: 2vw;
    /* padding: 0 2.857vw; */
    padding: 0 1.857vw;
    height: 8vw;
    line-height: 8vw;
  }

  .info {
    font-size: 4.285vw;
    margin-right: 3.571vw;
  }

  .headPortrait {
    width: 5.714vw;
    height: 5.714vw;
  }

  .el-dropdown {
    font-size: 2vw;
  }

  .logo {
    width: 7.142vw;
    height: 7.142vw;
    left: 1.428vw;
  }
}
</style>
